<template>
    <div class="course-list">
      <h2>科普信息</h2>
      <el-table :data="courses" style="width: 100%">
        <el-table-column prop="title" label="信息标题"></el-table-column>
        <el-table-column prop="category" label="分类"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="viewDetail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const courses = ref([
    { id: 1, title: '现代农业技术', category: '农业科技', content: '...' },
    { id: 2, title: '生态保护知识', category: '环境保护', content: '...' }
  ])
  </script>
  
  <style scoped>
  .course-list {
    padding: 20px;
  }
  
  .el-table {
    margin-top: 20px;
  }
  </style>